Three.js base

A base/starter fiddle for Three.js

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">

varying vec2 vUv;

attribute vec3 instanceColor;
varying vec3 vInstanceColor;


void main() {
  vec3 transformed = vec3( position );
  vec4 mvPosition = vec4( transformed, 1.0 );
  // # c'est ca
  #ifdef USE_INSTANCING
	mvPosition = instanceMatrix * mvPosition;
  #endif
  vInstanceColor = instanceColor;
  //vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
  vec4 modelViewPosition = modelViewMatrix * mvPosition;
  vUv = uv;
  gl_Position = projectionMatrix * modelViewPosition;
}

</script>

<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;

uniform vec2 u_resolution;
uniform float radius;
uniform float innerWidth;

uniform float width1;
uniform float maxDistVisible;
uniform float brightCircleWidth;

//input from the vertex
varying vec3 vInstanceColor;

vec3 paintCircle(vec2 uv,vec2 center,float rad,float innerWidth,float width){
    
    vec2 diff=center-uv;
    float len=length(diff);
    
    float circle=smoothstep(rad-innerWidth,rad,len)-smoothstep(rad,rad+width,len);
    
    return vec3(circle);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord){
    //gl_FragCoord.xy are screen space coordinates of current pixel based on viewport size
    //st will be the coordinate in range [0, 1]
    //here it's like dividing vec2(1,1) / vec2(10,10) => 1/10 & 1/10
    vec2 st=fragCoord.xy/u_resolution.xy;
    
    //here we're using the resolution ratio to get a perfect circle
    st.x*=u_resolution.x/u_resolution.y;
    
    vec3 colornew;
    vec4 circle;
    float a=1.;
    float pct=0.;
    vec2 center=vec2(0.5,0.5);
    
    //here we're adjusting x coordinate for when u_resolution.x != u_resolution.y
    st.x-=((u_resolution.x/u_resolution.y)-1.)/2.;
    
    //paint color circle
   ...

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

var camera, scene, renderer, mesh, material, stats;
var glowingParticle, glowingParticle_inst;

var dummySphere = new THREE.Object3D();
var dummyMatrix = new THREE.Matrix4();
var stepIncr = 0.22;
var stepIncrY = 1.62;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 7;

    // Create scene.
    scene = new THREE.Scene();

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

    // Add stats to page.
    stats = new Stats();
    document.body.appendChild( stats.dom );
  
    
    //glow material
    var material = new THREE.ShaderMaterial({
      wireframe: false,
      transparent: true,
      flatShading: false,
			depthWrite: false,
      vertexShader:document.getElementById( 'vertexShader' ).textContent,
      fragmentShader:document.getElementById( 'fragmentShader' ).textContent,
      uniforms: {
        u_resolution: { value: new THREE.Vector2(1, 1)  },
        width1: { type: 'f', value: 0.04},
        radius: { type: 'f', value: 0},
        innerWidth: { type: 'f', value: 0.5},
        maxDistVisible: {type: 'f', value: 0.2},
        brightCircleWidth: {type: 'f', value: 0.25}
      }
    });
   
    
    //material = new THREE.MeshBasicMaterial({color:new THREE.Color(0x00ccff)});
     var...